<template>
  <div>
    <el-form
      style="width: 700px"
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
    >
      <el-form-item label="电影院名称" prop="cinema_name">
        <el-input
          v-model="form.cinema_name"
          placeholder="请输入电影院名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="选择位置">
        <div
          id="container"
          style="width: 100%; height: 240px; border: 1px solid black"
        ></div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input
          v-model="form.address"
          placeholder="请输入详细地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-input v-model="form.province" placeholder="请输入省份"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city" placeholder="请输入城市"></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="district">
        <el-input v-model="form.district" placeholder="请输入街道"></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="form.longitude" placeholder="请输入经度"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="form.latitude" placeholder="请输入纬度"></el-input>
      </el-form-item>
      <el-form-item label="电影院标签" prop="tags">
        <el-select v-model="form.tags" multiple placeholder="请选择">
          <el-option v-for="item in tag" :key="item.id" :label="item.tagname" :value="item.tagname"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null, // 保存地图
      marker:null, // 当前选中的坐标点
      tag:[], // 保存电影院标签
      form: {
        cinema_name: "", 
        address: "",
        province:"",
        city: "",
        district: "",
        longitude: "",
        latitude: "",
        tags: "",
      },
      rules: {
        cinema_name: [{ required: true, message: "必填", trigger: "blur" }],
        address: [{ required: true, message: "必填", trigger: "blur" }],
        province: [{ required: true, message: "必填", trigger: "blur" }],
        city: [{ required: true, message: "必填", trigger: "blur" }],
        district: [{ required: true, message: "必填", trigger: "blur" }],
        longitude: [{ required: true, message: "必填", trigger: "blur" }],
        latitude: [{ required: true, message: "必填", trigger: "blur" }],
        tags: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  methods: {
    
    onSubmit() {},
    // 通过position经纬度，使用Amap.Geocoder插件
    getAddress(AMap,position){
        let geocoder=new AMap.Geocoder()
        geocoder.getAddress(position, (status, result)=>{
            console.log(status)
            console.log(result)
            this.form.address=result.regeocode.formattedAddress
            this.form.province=result.regeocode.addressComponent.province
            this.form.city=result.regeocode.addressComponent.city
            this.form.district=result.regeocode.addressComponent.district
            this.form.longitude=position[0]
            this.form.latitude=position[1]
        })
    },
  },
  // 生命周期方法
  mounted() {
    // 获取电影院标签
    this.$httpApi.cinemaApi.queryAllTags().then(res=>{
        console.log(res)
        this.tag=res.data.data
    }),

    // 加载地图
    window._AMapSecurityConfig = {
            securityJsCode:'7cabbf0d2eaf26e8fb5d099eec2f7127',
        },
    AMapLoader.load({
      key: "85201ed7fbc0071a9a5ee27d7cc0e928", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        this.map = new AMap.Map("container");
        this.map.setCenter([112.960243, 28.166639]);
        this.map.setZoom(14);
        // 为地图绑定事件
        this.map.on("click", (ev)=> {
          // 触发事件的地理坐标，AMap.LngLat 类型
          let { lng, lat } = ev.lnglat;
          console.log({lng, lat});
          //  添加一个标记
          if(this.marker){
            this.marker.setPosition([lng,lat])
          }else{
          this.marker = new AMap.Marker({
            position: [lng, lat],
          });
          // 将创建的点标记添加到已有的地图实例：
          this.map.add(this.marker);
          }
          
          //  通过该经纬度，获取对应详细的位置字符串描述
          this.getAddress(AMap,[lng,lat])
        });
      }).catch((e) => {
        console.log(e);
      });
  },
};
</script>

<style lang="scss" scoped></style>
